<?php
/**
 * 主题演示页面
 * 展示每个主题的实际效果
 */

if (!defined('ABSPATH')) {
    exit;
}

// 获取当前主题
$current_theme = get_option('wp_spider_monitor_settings', array('interface_theme' => 'modern'))['interface_theme'] ?? 'modern';

?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>蜘蛛监控 - 主题演示</title>
    
    <!-- 加载所有主题CSS -->
    <link rel="stylesheet" href="<?php echo WP_SPIDER_MONITOR_PLUGIN_URL; ?>assets/themes/modern.css">
    <link rel="stylesheet" href="<?php echo WP_SPIDER_MONITOR_PLUGIN_URL; ?>assets/themes/classic.css">
    <link rel="stylesheet" href="<?php echo WP_SPIDER_MONITOR_PLUGIN_URL; ?>assets/themes/minimal.css">
    <link rel="stylesheet" href="<?php echo WP_SPIDER_MONITOR_PLUGIN_URL; ?>assets/themes/dark.css">
    <link rel="stylesheet" href="<?php echo WP_SPIDER_MONITOR_PLUGIN_URL; ?>assets/themes/colorful.css">
    
    <style>
        .theme-demo-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .theme-switcher-demo {
            display: flex;
            gap: 10px;
            margin-bottom: 30px;
            flex-wrap: wrap;
        }
        
        .theme-btn {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s ease;
        }
        
        .theme-btn.active {
            transform: scale(1.05);
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
        }
        
        .demo-section {
            margin: 30px 0;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin: 20px 0;
        }
        
        .stat-card {
            padding: 20px;
            border-radius: 8px;
            text-align: center;
        }
        
        .chart-container {
            height: 300px;
            margin: 20px 0;
            border-radius: 8px;
            padding: 20px;
        }
        
        .spider-list {
            display: grid;
            gap: 10px;
        }
        
        .spider-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px;
            border-radius: 5px;
            margin: 5px 0;
        }
    </style>
</head>
<body class="theme-<?php echo esc_attr($current_theme); ?>">
    <div class="theme-demo-container">
        <h1>🕷️ 蜘蛛监控主题演示</h1>
        <p>点击下面的按钮切换不同主题，查看实时效果</p>
        
        <div class="theme-switcher-demo">
            <button class="theme-btn" data-theme="modern" onclick="switchTheme('modern')">现代主题</button>
            <button class="theme-btn" data-theme="classic" onclick="switchTheme('classic')">经典主题</button>
            <button class="theme-btn" data-theme="minimal" onclick="switchTheme('minimal')">极简主题</button>
            <button class="theme-btn" data-theme="dark" onclick="switchTheme('dark')">暗黑主题</button>
            <button class="theme-btn" data-theme="colorful" onclick="switchTheme('colorful')">多彩主题</button>
            <button class="theme-btn" data-theme="vibrant" onclick="switchTheme('vibrant')">活力彩虹</button>
            <button class="theme-btn" data-theme="cyberpunk" onclick="switchTheme('cyberpunk')">赛博朋克</button>
            <button class="theme-btn" data-theme="nature" onclick="switchTheme('nature')">自然生态</button>
        </div>
        
        <!-- 蜘蛛统计概览 -->
        <div class="demo-section">
            <h2>📊 蜘蛛访问统计</h2>
            <div class="stats-grid">
                <div class="stat-card">
                    <h3>总访问量</h3>
                    <p style="font-size: 2em; margin: 10px 0;">1,234</p>
                    <small>过去30天</small>
                </div>
                <div class="stat-card">
                    <h3>活跃蜘蛛</h3>
                    <p style="font-size: 2em; margin: 10px 0;">6</p>
                    <small>今日检测</small>
                </div>
                <div class="stat-card">
                    <h3>最新访问</h3>
                    <p style="font-size: 1.5em; margin: 10px 0;">2分钟前</p>
                    <small>Googlebot</small>
                </div>
                <div class="stat-card">
                    <h3>推送状态</h3>
                    <p style="font-size: 2em; margin: 10px 0;">✅</p>
                    <small>全部正常</small>
                </div>
            </div>
        </div>
        
        <!-- 蜘蛛列表 -->
        <div class="demo-section">
            <h2>🕷️ 蜘蛛机器人列表</h2>
            <div class="spider-list">
                <div class="spider-item">
                    <div>
                        <strong>Googlebot</strong>
                        <br><small>Google搜索引擎爬虫</small>
                    </div>
                    <div>
                        <strong>125</strong> 次访问
                        <br><small>10:30:45</small>
                    </div>
                </div>
                <div class="spider-item">
                    <div>
                        <strong>Bingbot</strong>
                        <br><small>微软必应搜索引擎爬虫</small>
                    </div>
                    <div>
                        <strong>89</strong> 次访问
                        <br><small>09:15:22</small>
                    </div>
                </div>
                <div class="spider-item">
                    <div>
                        <strong>Baiduspider</strong>
                        <br><small>百度搜索爬虫</small>
                    </div>
                    <div>
                        <strong>67</strong> 次访问
                        <br><small>08:45:12</small>
                    </div>
                </div>
                <div class="spider-item">
                    <div>
                        <strong>Twitterbot</strong>
                        <br><small>Twitter社交爬虫</small>
                    </div>
                    <div>
                        <strong>34</strong> 次访问
                        <br><small>06:20:15</small>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 推送状态 -->
        <div class="demo-section">
            <h2>🚀 搜索引擎推送状态</h2>
            <div class="spider-list">
                <div class="spider-item">
                    <div>
                        <strong>百度推送</strong>
                        <br><small>156个URL已推送</small>
                    </div>
                    <div>
                        <span style="color: green;">✅ 成功</span>
                        <br><small>3个失败</small>
                    </div>
                </div>
                <div class="spider-item">
                    <div>
                        <strong>必应推送</strong>
                        <br><small>142个URL已推送</small>
                    </div>
                    <div>
                        <span style="color: green;">✅ 成功</span>
                        <br><small>全部成功</small>
                    </div>
                </div>
                <div class="spider-item">
                    <div>
                        <strong>谷歌推送</strong>
                        <br><small>98个URL已推送</small>
                    </div>
                    <div>
                        <span style="color: orange;">⚠️ 警告</span>
                        <br><small>12个失败</small>
                    </div>
                </div>
                <div class="spider-item">
                    <div>
                        <strong>搜狗推送</strong>
                        <br><small>0个URL已推送</small>
                    </div>
                    <div>
                        <span style="color: red;">❌ 失败</span>
                        <br><small>45个失败</small>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 实时访问日志 -->
        <div class="demo-section">
            <h2>🔄 实时访问日志</h2>
            <div class="spider-list">
                <div class="spider-item">
                    <div>
                        <strong>Googlebot</strong>
                        <br><small>正在访问: /blog/seo-tips</small>
                    </div>
                    <div>
                        <small>刚刚</small>
                        <br><small>IP: 66.249.64.0</small>
                    </div>
                </div>
                <div class="spider-item">
                    <div>
                        <strong>Bingbot</strong>
                        <br><small>正在访问: /plugins</small>
                    </div>
                    <div>
                        <small>5分钟前</small>
                        <br><small>IP: 157.55.39.0</small>
                    </div>
                </div>
                <div class="spider-item">
                    <div>
                        <strong>Baiduspider</strong>
                        <br><small>正在访问: /blog</small>
                    </div>
                    <div>
                        <small>8分钟前</small>
                        <br><small>IP: 220.181.108.0</small>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 主题切换功能
        function switchTheme(theme) {
            document.body.className = 'theme-' + theme;
            
            // 更新按钮状态
            document.querySelectorAll('.theme-btn').forEach(btn => {
                btn.classList.remove('active');
                if (btn.dataset.theme === theme) {
                    btn.classList.add('active');
                }
            });
            
            // 显示切换提示
            const themeNames = {
                modern: '现代主题',
                classic: '经典主题',
                minimal: '极简主题',
                dark: '暗黑主题',
                colorful: '多彩主题'
            };
            
            alert(`已切换到 ${themeNames[theme]}！`);
        }
        
        // 初始化当前主题
        document.addEventListener('DOMContentLoaded', function() {
            const currentTheme = '<?php echo esc_js($current_theme); ?>';
            switchTheme(currentTheme);
        });
    </script>
</body>
</html>